<script setup>
import messageService from '@/services/message.service';
import { AxiosError } from 'axios';
import { ElLoading, ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import MessageDetail from './MessageDetail.vue';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const createDefaultSearchEntity = () => {
    const e = {};
    return e;
}

const router = useRouter();
const route = useRoute();
const page = ref({});
const selections = ref([]);
const searchEntity = ref(createDefaultSearchEntity());
const tableLoading = ref(false);

const detailDialogVisible = ref(false);
const detailDialogOperation = ref('VIEW');
const detailDialogId = ref();

const load = async (no, size, searchObj) => {
    try {
        tableLoading.value = true;
        const res = await messageService.page(no, size, searchObj);
        page.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        tableLoading.value = false;
    }
}

const search = () => {
    load(1, page.value.size, searchEntity.value);
};

const clearSearch = () => {
    searchEntity.value = createDefaultSearchEntity();
    load(1, page.value.size, searchEntity.value);
};

const view = () => {
    if (selections.value.length == 0 || selections.value.length > 1) {
        ElMessage({ message: "请选择一条数据", type: "error" });
        return;
    }

    const row = selections.value[0];
    viewRow(row);
};

const viewRow = (row) => {
    detailDialogOperation.value = 'VIEW';
    detailDialogVisible.value = true;
    detailDialogId.value = row.id;
};

const selectionChanged = (val) => {
    selections.value = val;
}

const pageChanged = async (no) => {
    await load(no, page.value.size, searchEntity.value);
}

const pageSizeChanged = async (size) => {
    await load(1, size, searchEntity.value);
}

const detailDialogVisibleChanged = (val) => {
    load(page.value.number, page.value.size, searchEntity.value);
};

onMounted(async () => {
    await load();
});
</script>

<template>
    <ElForm size="small" inline>
        <ElFormItem label="标题">
            <ElInput v-model="searchEntity.title"></ElInput>
        </ElFormItem>
        <ElFormItem>
            <ElButton type="primary" :icon="Search" @click="search()">搜索</ElButton>
            <ElButton :icon="Refresh" @click="clearSearch()">清空</ElButton>
        </ElFormItem>
    </ElForm>
    <div class="flex">
        <ElButton size="small" :plain="true" type="info" :icon="View" @click="view()">查看</ElButton>
    </div>
    <ElTable row-key="id" table-layout="auto" :data="page.content" @selection-change="selectionChanged($event)"
        v-loading="tableLoading">
        <ElTableColumn type="selection" width="55" />
        <ElTableColumn prop="title" label="标题"></ElTableColumn>
        <ElTableColumn prop="receiverId" label="接收人ID"></ElTableColumn>
        <ElTableColumn prop="senderId" label="发送人ID"></ElTableColumn>
        <ElTableColumn prop="sentTime" label="发送时间"></ElTableColumn>
        <ElTableColumn prop="readState" label="已读">
            <template #default="scope">
                <span v-if="scope.row.readState">是</span>
                <span v-else>否</span>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="readTime" label="已读时间"></ElTableColumn>
        <!-- <ElTableColumn prop="description" label="描述"></ElTableColumn> -->
        <ElTableColumn prop="createdTime" label="创建时间"></ElTableColumn>
        <ElTableColumn prop="operation" label="操作">
            <template #default="scope">
                <ElButton size="small" link type="primary" :icon="View" @click="viewRow(scope.row)">查看</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
    <ElPagination layout="prev, pager, next, sizes, jumper, total" :total="Number(page.totalElements)"
        :current-page="page.number" :page-size="page.size" :page-sizes="[10, 30, 50, 100, 200]"
        @current-change="pageChanged($event)" @size-change="pageSizeChanged($event)" />

    <MessageDetail ref="detailDialog" v-model:visible="detailDialogVisible" :operation="detailDialogOperation"
        :id="detailDialogId" @update:visible="detailDialogVisibleChanged($event)">
    </MessageDetail>
</template>

<style scoped lang="scss"></style>